<template>
  <div class="medicalDetailList-page">
    <div class="medical-des">
      <div class="des-item"><label>药品通用名：</label><span class="content">{{ypmc}}</span></div>
      <div class="des-item"><label>药品编码：</label><span class="content">{{code}}</span></div>
      <div class="des-item"><label>剂型：</label><span class="content">{{ypjx}}</span></div>
      <div class="des-item"><label>规格：</label><span class="content">{{ypgg}}</span></div>
      <div class="des-item"><label>批准文号：</label><span class="content">{{pzwh}}</span></div>
      <div class="des-item"><label>厂家：</label><span class="content">{{scqymc}}</span></div>
      <div class="des-item"><label>单位：</label><span class="content">{{zxbzdw}}</span></div>
    </div>
    <Table
        border
        :columns="column"
        :data="list"
        stripe
        :loading="tableLoading"
        no-filtered-data-text="未查询到符合条件的记录"
      ></Table>
      <Button class="backBtn" @click="handleBack">
        <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回</Button>
  </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  data() {
    return {
      // 头部药品详情项
      ypmc: '',
      code: '',
      ypjx: '',
      ypgg: '',
      pzwh: '',
      scqymc: '',
      zxbzdw: '',
      drugId: '',
      // table相关
      tableLoading: false,
      column: [
        {
          title: "排序", key: "index", align: "center", width: 70,
          render(h, params) {
            let resString = params.index + 1;
            return params.row.index || resString;
          }
        },
        { title: "药店名称", key: "orgName", align: "center" },
        { title: "药店地址", key: "hosAddr", align: "center" },
        { title: "联系人", key: "linkman", align: "center" },
        { title: "联系电话", key: "linkmanTelephone", align: "center" },
        { title: "库存数量", key: "stock", align: "center" },
        { title: "价格（元）", key: "price", align: "center" },
        { title: "金额（元）", key: "priceTotal", align: "center" },
        // { title: "操作", align: "left",
        //   render: (h, params) => {
        //     let row = params.row;
        //       return row.drugId && h("div", [
        //         h(
        //           "Button",
        //           {
        //             props: {
        //               size: "small",
        //               type: 'primary'
        //             },
        //             style: {
        //               marginRight: "5px"
        //             },
        //             on: {
        //               click: () => {
        //                 this.details(row);
        //               }
        //             }
        //           },
        //           "出入库明细"
        //         ),
        //       ]);
        //   }
        // }
      ],
      list: [],
      hospitalId: '',
    }
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "药品云库存管理"
      },
      {
        path: "/index/drugfirmsmanage/cloudStockManagement/list",
        title: "云库存实时监管"
      }
    ];
    this.$emit("changeBreadList", breadList);
    this.cloudStockMonitorMedicalDetailList();
  },
  methods: {
    cloudStockMonitorMedicalDetailList() {
      // let index = this.drugId.lastIndexOf("&")
      // let hospitalId
      // if(this.drugId.substring(index+1,this.drugId.length)){
      //   hospitalId = this.drugId.substring(index+1,this.drugId.length)
      // }else{
      //   hospitalId = null
      // }
      const reqObj = {
        drugId: this.$route.query.id,
        pageNo: 1,
        pageSize: 9999,
        hospitalId: this.hospitalId ? this.$route.query.hosid : ''
      };
      this.tableLoading = true;
      this.$axios.post(api.findStockDetail, reqObj).then(res => {
        if (res.data.code === 1) {
          const info = res.data.object;
          this.ypmc = info.ypmc;
          this.code = info.code;
          this.ypjx = info.ypjx;
          this.ypgg = info.ypgg;
          this.pzwh = info.pzwh;
          this.scqymc = info.scqymc;
          this.zxbzdw = info.zxbzdw;
          this.list = info.stockList;
          this.tableLoading = false;
          if (info.stockList && info.stockList.length) {
            let stock = 0, priceTotal = 0;
            info.stockList.forEach((item, index) => {
              item.stock && (stock += Number(item.stock));
              item.priceTotal && (priceTotal += Number(item.priceTotal));
            })
            this.list.push({
              index: '合计',
              stock,
              priceTotal,
            })
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    details(item) {
      const { hospitalid, drugId, hospitalDrugId } = item;
      this.functionJS.queryNavgationTo(
        this,
        '/index/operation/cloudStockManagement/stockmonitor/stockDetailList/' + hospitalDrugId,
        {
          drugId,
          hospitalid
        }
      );
    },
    handleBack() {
      this.functionJS.queryNavgationTo(
        this,
        '/index/drugfirmsmanage/cloudStockManagement/list',
      );
    }
  }

}
</script>

<style lang="less" scoped>
.medicalDetailList-page {
  padding: 10px;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  .medical-des {
    font-weight: bold;
    display: flex;
    .des-item {
      padding: 10px 40px 10px 0;
    }
  }
  .backBtn {
    display: block;
    width: 100px;
    margin: 20px auto;
  }
}
</style>